<template>
	<view class="scan-jar df-yc">
		<view class="popup df-yc mt30">
			<image class="image" style="width: 690rpx;" src="../../../static/imgs/images/smbgta.png" mode="widthFix">
			</image>
			<view style="font-size: 50rpx;width: 600rpx;text-align:center;" class="title fb white shsc">
				点亮<text style="color:#EFBB91 ;" class="mx20">{{scanData.pro_name}}</text>
			</view>
			<view style="color:#EFBB91;" class="score df-c mt30">
				茶多酚<text class="fb mx10">+{{scanData.bowl.get_score}}</text>
			</view>
			<view class="list bs df-c">
				<view :class="{item:true,'item-active':false,'df-c':true}"
					v-for="(item,index) in scanData.pro_count_num" :key="index">
					<image style="width: 56rpx;"
						:src="index<scanData.pro_open_num?decodeURIComponent(scanData.open_teapot_ico):decodeURIComponent(scanData.close_teapot_ico)"
						mode="widthFix"></image>
				</view>
			</view>
			<view class="button">
				<button @click="jump('/pages/public/poster/index',{posterType:scanData.pro_type,scanData:JSON.stringify(scanData)})"
					class="btn df-c fb fs32">分享给好友</button>
			</view>
			<view @click="jump('/pages/goods/box-detail/box-detail',{teabox_id:scanData.pro_teabox_id})"
				style="color:#EFBB91 ;margin-top: 36rpx;" class="check fs26">
				查看茶盒详情
			</view>
			<view class="bottom df-yc">
				<view class="title fs36 shsc white">茶叶介绍</view>
				<view
					style="font-weight:300;margin-top: 45rpx;opacity: 0.5;width: 490rpx;text-align-last:center;text-align: justify;"
					class="content fs26 white">
					{{scanData.pro_description}}
				</view>
				<view style="margin-top:45rpx ;margin-bottom: 60rpx;" class="buy df-c">
					<text @click="gotoPage(decodeURIComponent(scanData.pro_url))" class="fs26 mr10"
						style="color:#EBBB93 ;">点我购买</text>
					<image style="width: 23rpx;" src="../../../static/imgs/images/shop.png" mode="widthFix">
					</image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			scanData: Object
		},
		components: {

		},
		data: function() {
			return {
				temImgUrl: this.$IMG_URL_TEMP,
			}
		},
		methods: {
			gotoPage(path) {
				uni.navigateTo({
					url: path
				})
			},
			jump(path, params) {
				this.$Router.push({
					path: path,
					params: params
				})
			}
		},
		created() {
		},
		mounted() {},
	}
</script>

<style scoped lang="scss">
	.scan-jar {
		.popup {
			width: 690rpx;
			background: linear-gradient(329deg, #6B232B, #7E242D);
			border-radius: 20rpx;
			position: relative;

			.title {
				margin-top: 80rpx;
			}

			.image {
				top: 0;
				left: 0;
				position: absolute;
			}

			.score {
				width: 177rpx;
				height: 55rpx;
				background: rgba($color: #FFDFC6, $alpha: 0.1);
				border-radius: 28rpx;
			}

			.list {
				margin-top: 68rpx;
				width: 520rpx;
				height: 280rpx;
				border: 1rpx solid rgba($color: #FFD8B9, $alpha: 0.1);
				border-radius: 20rpx;
				flex-wrap: wrap;
				padding: 20rpx 0;

				.item {
					width: 100rpx;
					height: 100rpx;
					background: #9A2833;
					border: 1rpx solid #9C414A;
					box-shadow: 0rpx 3rpx 10rpx 0px rgba(83, 24, 30, 0.7) inset;
					border-radius: 20rpx;
					flex-shrink: 0;
					margin: 0 10rpx;
				}

				.item-active {
					width: 100rpx;
					height: 100rpx;
					background: #FFE7D5;
					border: 1rpx solid #FFE6D4;
					border-radius: 20rpx;
					flex-shrink: 0;
					margin: 0 10rpx;
				}
			}

			.button {
				margin-top: 70rpx;

				.btn {
					width: 520rpx;
					height: 90rpx;
					background: linear-gradient(270deg, #E8B58E, #F7D9AA);
					box-shadow: 0px 3rpx 1rpx 0px #580F17;
					border-radius: 45rpx;
					color: #581E24;
				}

				.btn::after {
					border: none;
				}
			}
		}
	}
</style>
